★ サンプル・15 ★
1.セルごとに背景色を設定したテーブル
1行1列目は黄色、2行2列目はオレンジ、3行3列目は赤を設定
(ソース)
<TABLE border="2">
<TR>
<TD bgcolor="#ffff00">1行1列め </TD><TD>1行2列め</TD>
<TD>1行3列め</TD>
</TR>
<TR>
<TD>2行1列め</TD><TD bgcolor="#ff9900">2行2列め</TD>
<TD>2行3列め</TD>
</TR>
<TR>
<TD>3行1列め</TD><TD>3行2列め</TD>
<TD bgcolor="#ff0000">3行3列め</TD>
</TR>
</TABLE> |
(表示例)
1行1列め | 1行2列め | 1行3列め |
2行1列め | 2行2列め | 2行3列め |
3行1列め | 3行2列め | 3行3列め |
2.色設定の優先順位
テーブル全体、行単位、セル単位の色設定が重複した場合、
優先順位は、高いほうからセル、行、テーブル全体の順になります。
テーブル全体をライム、1行目を水色、その1列目のセルを白にすると
(ソース)
<TABLE border="2" bgcolor="#00ff00">
<TR bgcolor="#00ffff">
<TD bgcolor="#ffffff">1行1列め</TD><TD>1行2列め</TD>
<TD>1行3列め</TD>
</TR>
<TR>
<TD>2行1列め</TD><TD>2行2列め</TD><TD>2行3列め</TD>
</TR>
<TR>
<TD>3行1列め</TD><TD>3行2列め</TD><TD>3行3列め</TD>
</TR>
</TABLE> |
(表示例)
1行1列め | 1行2列め | 1行3列め |
2行1列め | 2行2列め | 2行3列め |
3行1列め | 3行2列め | 3行3列め |
3.配色を考えたテーブル
配色って、けっこう難しい。色の選択を間違うと、
ぎらぎらした、とっても見にくいテーブルに……。
好みにもよるけど、どぎつい色の組み合わせは
避けたほうが無難。平凡になる可能性はあるけどね。
セル1A | セル1B | セル1C |
セル2A | セル2B | セル2C |
セル3A | セル3B | セル3C |
※ソースは、6月1日の日記の練習コーナーに記載